
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { showToast } from 'vant';
let router = useRouter()

function isPhoneNumberValid(phone) {
    const phoneRegex = /^1[3-9]\d{9}$/;
    return phoneRegex.test(phone);
}  
let phone = ref('')
let code = ref('')
let password = ref('')
let repassword = ref('')

let time = 10;  //  倒计时的时长  s
let timer = null; // 时间对象
let lock = false;//  是否锁定
let tips = ref('获取验证码')
import { getenroll,sendSmsCode } from '@/api/user';

const zc = () =>{
    // console.log(code.value);
	
    if(!isPhoneNumberValid(phone.value)){
		showToast('手机号格式错误')
		return 
	}
    if(!/^\d{6}$/.test(code.value)){
		showToast('验证码格式错误')
		return 
	}
	
	if(password.value!==repassword.value){
		showToast('两次密码输入不一致')
		return 
	}
	
	
	let data = {
	    mobile: phone.value,
	    code: code.value, 
	    type: "register",
	    password: password.value,
	}
	console.log(data)

    getenroll(data).then(res=>{
		
		showToast(res.msg)
       if(res.code === 0){
		 setTimeout(v=>{
			   router.back()
		 },1000)
	   }

    })   
}
function getCode(){
	if(lock)  return; //  如果点击时   lock===true  表示现在正在上锁  
	if(!isPhoneNumberValid(phone.value)){
		showToast('手机号格式错误')
		return 
	}
	// 加锁  倒计时
	lock = true;//  上锁 
	
	tips.value = '正在发送...'
	
    sendSmsCode({
        "checkUserExist": "!exists",   //  
        "type": "register",// 场景值 
        "mobile": phone.value
    }).then(res=>{
		
		console.log(res)
		
		if(res.code === 0){
			showToast('发送成功,请注意查收')
			
			timer = setInterval(v=>{
				time--;
				tips.value =  `${time}s后重新获取`
				
				if(time<=0){
					clearInterval(timer)
					time = 10;
					tips.value =  '再次获取'
					lock = false;
				}
			},1000)
		}else{
			showToast(res.msg)
				lock = false;
		}
		
	})
}

</script>

<template>
    <div class="enroll">
        <div>
          <van-icon name="arrow-left" @click="back" size="30" />
            <span @click="back">已有账号，去登录</span>
        </div>
    </div>
    <div class="txt">
        <h1>注册</h1>
    </div>
    <div class="cell">
        <div class="form">
            <div class="phonenum">
                <span class="num">
                    +86
                    <span class="iconfont icon-xia"></span>
                </span>
                <span class="inp">
                    <input type="text" placeholder="请输入您的手机号" v-model="phone">
                    <!-- <div>请输入正确的手机号</div> -->
                </span>
            </div>
            <div class="captcha">
                <span><input type="text" placeholder="请输入验证码" v-model="code"></span>
                <span @click="getCode">{{tips}}</span>
            </div>
            <div class="password">
                <div class="pwd">
                    <input type="text" placeholder="请设置您的密码" v-model="password">
                </div>
                <div class="repwd">
                    <input type="text" placeholder="请确认您的密码" v-model="repassword">
                </div>
            </div>
            
            <div class="butt" @click="zc">
                <div>
                    <span >注册</span>
                </div>
            </div>
        </div>
        <van-divider :style="{borderColor: '#ccc'}">快捷登录</van-divider>
        <div class="wechat">
            <span class="iconfont icon-weixin"></span>
        </div>
    </div>
</template>

<style scoped>
@import url('./user.css');
</style>
